<html>
<script type="text/javascript" language="JavaScript">
function fill(i)
{
	setTurnIndicator();
	stack.push(i);
	if (winner == "none")
	{
		if(document.getElementById(i+"_status").getAttribute("class") == "unfilled")
		{
			if (turn % 2 == 0)
			{
				document.getElementById(i).src="pictures/x.jpg";
				document.getElementById(i+"_status").setAttribute("class", "x");
			}
			else
			{
				document.getElementById(i).src="pictures/o.jpg";
				document.getElementById(i+"_status").setAttribute("class", "o");
			}
			if (turn >= 4)
			{
				if(checkWin())
				{
					alert(players[winner] + " is the winner!");
					document.getElementById("score"+winner).innerHTML = Number(document.getElementById("score"+winner).innerHTML) + 1;
					newGame();
					return;
				}
			}
			turn++;
			if (turn - first == 9)
			{
				alert("Draw");
				newGame();
				return;
			}
		}
		else
		{
			alert("spot taken");
		}
	}
}

function checkWin()
{
	if (document.getElementById("1_status").getAttribute("class") == "x" && document.getElementById("2_status").getAttribute("class") == "x" && document.getElementById("3_status").getAttribute("class") == "x")
		{winner = "1"; return true;}
	if (document.getElementById("1_status").getAttribute("class") == "x" && document.getElementById("4_status").getAttribute("class") == "x" && document.getElementById("7_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	if (document.getElementById("1_status").getAttribute("class") == "x" && document.getElementById("5_status").getAttribute("class") == "x" && document.getElementById("9_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	if (document.getElementById("2_status").getAttribute("class") == "x" && document.getElementById("5_status").getAttribute("class") == "x" && document.getElementById("8_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	if (document.getElementById("3_status").getAttribute("class") == "x" && document.getElementById("5_status").getAttribute("class") == "x" && document.getElementById("7_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	if (document.getElementById("3_status").getAttribute("class") == "x" && document.getElementById("6_status").getAttribute("class") == "x" && document.getElementById("9_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	if (document.getElementById("4_status").getAttribute("class") == "x" && document.getElementById("5_status").getAttribute("class") == "x" && document.getElementById("6_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	if (document.getElementById("7_status").getAttribute("class") == "x" && document.getElementById("8_status").getAttribute("class") == "x" && document.getElementById("9_status").getAttribute("class") == "x") 
		{winner = "1"; return true;};
	
	if (document.getElementById("1_status").getAttribute("class") == "o" && document.getElementById("2_status").getAttribute("class") == "o" && document.getElementById("3_status").getAttribute("class") == "o") 
		{winner = "2"; return true;};
	if (document.getElementById("1_status").getAttribute("class") == "o" && document.getElementById("4_status").getAttribute("class") == "o" && document.getElementById("7_status").getAttribute("class") == "o") 
		{winner = "2"; return true;};
	if (document.getElementById("1_status").getAttribute("class") == "o" && document.getElementById("5_status").getAttribute("class") == "o" && document.getElementById("9_status").getAttribute("class") == "o") 
		{winner = "2"; return true;};
	if (document.getElementById("2_status").getAttribute("class") == "o" && document.getElementById("5_status").getAttribute("class") == "o" && document.getElementById("8_status").getAttribute("class") == "o") 	
		{winner = "2"; return true;};
	if (document.getElementById("3_status").getAttribute("class") == "o" && document.getElementById("5_status").getAttribute("class") == "o" && document.getElementById("7_status").getAttribute("class") == "o")
		{winner = "2"; return true;};
	if (document.getElementById("3_status").getAttribute("class") == "o" && document.getElementById("6_status").getAttribute("class") == "o" && document.getElementById("9_status").getAttribute("class") == "o")
		{winner = "2"; return true;};
	if (document.getElementById("4_status").getAttribute("class") == "o" && document.getElementById("5_status").getAttribute("class") == "o" && document.getElementById("6_status").getAttribute("class") == "o")
		{winner = "2"; return true;};
	if (document.getElementById("7_status").getAttribute("class") == "o" && document.getElementById("8_status").getAttribute("class") == "o" && document.getElementById("9_status").getAttribute("class") == "o")
		{winner = "2"; return true;};
}

function newGame()
{
	turn = 0;
	first = 0;
	var temp = confirm("New game: Do you want " + players[1] + " to go first? ");
	if (!temp)
	{
		turn = 1;
		first = 1;
	}
	for (i=1;i<=9;i++)
	{
		document.getElementById(i+"_status").setAttribute("class", "unfilled");
		document.getElementById(i).src="pictures/base.jpg";
	}
	stack = new Array();
	winner = "none";
	setTurnIndicator();
}

function setTurnIndicator()
{
	document.getElementById("player").innerHTML = players[turn % 2 + 1];
	if (turn % 2 + 1 == 1)
		{
			document.getElementById("p1").setAttribute("height", "150px");
			document.getElementById("p1border").setAttribute("style","border: solid 1px red");
	
			document.getElementById("p2").setAttribute("height", "125px");
			document.getElementById("p2border").setAttribute("style","");
		}
		else
		{
			document.getElementById("p2").setAttribute("height", "150px");
			document.getElementById("p2border").setAttribute("style","border: solid 1px red");

			document.getElementById("p1").setAttribute("height", "125px");
			document.getElementById("p1border").setAttribute("style","");
		}
}

function undo()
{
	var x = stack.pop();
	if (typeof x === "undefined")
	{
		alert("No more moves to undo");
	}
	else
	{
		document.getElementById(x+"_status").setAttribute("class", "unfilled");
		document.getElementById(x).src="pictures/base.jpg";
		turn--;
		document.getElementById("player").innerHTML = players[turn % 2 + 1];
	}
}

function newGameButtonClicked()
{
	if (confirm("Are you sure you want to end this game and start a new one?"))
	{
		newGame();
	}
}


function newSession()
{
	document.getElementById("score1").innerHTML = 0;
	document.getElementById("score2").innerHTML = 0;
	
	//document.getElementById("player1").innerHTML = "Player 1";
	//document.getElementById("player2").innerHTML = "Player 2";

	players = new Array();
	players[0] = "";
	players[1] = "Player 1";
	players[2] = "Player 2";
	//var temp = prompt("Enter Player 1 (X) name", "");
	//if (temp != "" && temp != null)
		//players[1] = temp;
	//document.getElementById("player1").innerHTML = players[1];
	
	//var temp = prompt("Enter Player 2 (O) name", "");
	//if (temp != "" && temp != null)
		//players[2] = temp;
	//document.getElementById("player2").innerHTML = players[2];
	newGame();
}

function newSessionButtonClicked()
{
	if (confirm("Are you sure you want to end this session and start a new one? You will lose all your scores"))
	{
		newSession();
	}
}

function takePicture(id)
{
	if (id == 1)
	{
		try 
		{
			blackberry.media.camera.takePicture(successCB1);
		} 
		catch(e) 
		{
			alert("Here Error in supported: " + e);
		}
	}
	else if (id == 2)
	{
		try 
		{
			blackberry.media.camera.takePicture(successCB2);
		} 
		catch(e) 
		{
			alert("Error in supported: " + e);
		}
	}
}

function successCB1(filePath) {
  document.getElementById("player1").innerHTML = "<img src="+filePath+" alt='Player1' height='125px' id='p1' />";
}

function successCB2(filePath) {
  document.getElementById("player2").innerHTML = "<img src="+filePath+" alt='Player1' height='125px' id='p2' />";
}

</script>
<body onload="newSession()">
<h2> <b id="player"></b> to play</h2>
<table width="100%" height="90%">
<tr>
<td>
<table border='1' width="100%" height="100%">
	<tr>
		<td onClick="fill('1')" style="text-align: center"><img id="1" src="pictures/base.jpg" height="100px"  width="100px"><p id="1_status" class="unfilled"/></td>
		<td onClick="fill('2')" style="text-align: center"><img id="2" src="pictures/base.jpg" height="100px"  width="100px"><p id="2_status" class="unfilled"/></td>
		<td onClick="fill('3')" style="text-align: center"><img id="3" src="pictures/base.jpg" height="100px"  width="100px"><p id="3_status" class="unfilled"/></td>
	</tr>
	<tr>
		<td onClick="fill('4')" style="text-align: center"><img id="4" src="pictures/base.jpg" height="100px"  width="100px"><p id="4_status" class="unfilled"/></td>
		<td onClick="fill('5')" style="text-align: center"><img id="5" src="pictures/base.jpg" height="100px"  width="100px"><p id="5_status" class="unfilled"/></td>
		<td onClick="fill('6')" style="text-align: center"><img id="6" src="pictures/base.jpg" height="100px"  width="100px"><p id="6_status" class="unfilled"/></td>
	</tr>
	<tr>
		<td onClick="fill('7')" style="text-align: center"><img id="7" src="pictures/base.jpg" height="100px"  width="100px"><p id="7_status" class="unfilled"/></td>
		<td onClick="fill('8')" style="text-align: center"><img id="8" src="pictures/base.jpg" height="100px"  width="100px"><p id="8_status" class="unfilled"/></td>
		<td onClick="fill('9')" style="text-align: center"><img id="9" src="pictures/base.jpg" height="100px"  width="100px"><p id="9_status" class="unfilled"/></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td style="text-align:right"><button type="button" onclick="undo()"> Undo! </button></td>
		
</table>
		

</td>
<td>
<table border="1" width="100%" height="100%">
<tr>
	<td width="35%"><center><table id="p1border"><tr><td id="player1"><img src="pictures\Player2.jpg" height="125px" id="p1"/></td></tr></table></center></td>
	<td width="35%"><center><table id="p2border"><tr><td id="player2"><img src="pictures\Player1.jpg" height="125px" id="p2"/></td></tr></table></center></td>
</tr>
<tr>
	<td style="text-align:right" height="1%">
		<img src="pictures\camera.jpg" height="100px" onClick="takePicture(1)"/>
	</td>
	<td style="text-align:right">
		<img src="pictures\camera.jpg" height="100px" onClick="takePicture(2)"/>
	</td>
</tr>
<tr>
	<td id="score1" style="text-align: center; font-size:35px"></td></h1>
	<td id="score2" style="text-align: center; font-size:35px"></td></h1>
</tr>
<tr>
	<td>
		<center><button type="button" onclick="newGameButtonClicked()"> New Game </button></center>
	</td>
	<td>
		<center><button type="button" onclick="newSessionButtonClicked()"> New Session </button></center>
	</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

